<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type=text/javascript src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<child ref="childRef" :cname="'xuyan'" msg="tttt" @vote="voteClicked"></child>
			<button @click="btnTap"></button>
		</div>
		<script>
		const {h, ref, computed, onMounted, reactive} = Vue;
		const child = {
			props: ['cname'],
			emits: ['vote'],
			setup(props, { expose, emit }) {
			  console.log("props = ",props);
		      const count = ref(0)
			  const ractInfo = reactive({name:'xunyan',age:39})
			  const increment2 = () => ++count.value
			  const logPrint = function (){
				  console.log("logPrint this = ",this)
				  
			  }
			  expose({
			    increment2,
				count
			  })
			  onMounted(function tt(){
				  console.log("the child is onMounted");
				  console.log("this = ",this)
			      logPrint()
				  increment2()
			  })
			  /*
			  const enventEmit = () => {
				  console.log("ractInfo.name = ",ractInfo.name)
				  emit('vote',count.value)
			  }
			
			  return () => h('div',{
				  onClick:() => enventEmit()
			  }, [count.value,h('text',{onClick:function(){console.log("this == ",this)}},"test")])
			  
			  */
			},
			methods:{
				btnTap(){
					console.log(this);
					console.log("this.$attrs = ",this.$attrs)
				}
			},
			template:`<div onclick="alert('hi')">dddddddd</div>`
		}
		
		const App = {
		    setup(){
		        // 为目标对象创建一个响应式对象
		        const state = Vue.reactive({count: 0});
		        function increment(){
		            state.count++;
		        }
				const childRef = ref(null)
				onMounted(() => {
					console.log("the parent is onMounted");
					console.log("childRef = ",childRef)
					
					childRef.value.increment2()
				})
		        return {
		            state,
		            increment,
					childRef
		        }   
		    },
			components:{
				child
			},
			methods:{
				btnTap(){
					console.log("childRef = ",this.childRef);
					this.childRef.increment2()
				},
				voteClicked(e){
					console.log(this)
					console.log("e = ",e);
				}
			}
		};
		const app = Vue.createApp(App);
		app.mount('#app');
		
		
		</script>
	</body>
</html>
